<template>
	<view>
		<view style="padding:36rpx 16rpx;">
			<g-title-wrap label="基础使用" label-width="550">
				<template slot='header'>
				</template>
				<view style="margin:10rpx 0;">
					<text style="margin-right: 20rpx;">label: </text>
					<g-select v-model="title" :tran-option="listData" placeholder="点我试试">
					</g-select>
				</view>
				<view>
					<text style="margin-right: 20rpx;">value: </text>
					<g-input v-model="title" style="width: 350rpx;"></g-input>
				</view>
			</g-title-wrap>
		</view>
		<g-divider></g-divider>
		<view style="padding:36rpx 16rpx;">
			<g-title-wrap label="基础使用(value回显值)" label-width="550">
				<template slot='header'>
				</template>
				<view style="margin:10rpx 0;">
					<text style="margin-right: 20rpx;">label: </text>
					<g-select v-model="value1" :tran-option="listData" placeholder="点我试试">
					</g-select>
				</view>
				<view>
					<text style="margin-right: 20rpx;">value: </text>
					<g-input v-model="value1" style="width: 350rpx;"></g-input>
				</view>
			</g-title-wrap>
				<h6 style="color: #ff0307;">你可以通过绑定双向value更方便的，来进行表单的修改，不需要再做视图层回显处理</h6>
		</view>
		<g-divider></g-divider>
		<view style="padding:36rpx 16rpx;">
			<g-title-wrap label="点击mask是否关闭(mask-click)" label-width="550">
				<template slot='header'>
					<g-switch v-model="showMask"></g-switch>
				</template>
				<view style="margin:10rpx 0;">
					<text style="margin-right: 20rpx;">label: </text>
					<g-select v-model="value1" :maskClick="showMask" :tran-option="listData" placeholder="点我试试">
					</g-select>
				</view>
				<view>
					<text style="margin-right: 20rpx;">value: </text>
					<g-input v-model="value1" style="width: 350rpx;"></g-input>
				</view>
			</g-title-wrap>
		</view>
		<g-divider></g-divider>
		<view style="padding:36rpx 16rpx;">
			<g-title-wrap label="是否支持搜索(filterable)" label-width="550">
				<template slot='header'>
					<g-switch v-model="filterable"></g-switch>
				</template>
				<view style="margin:10rpx 0;">
					<text style="margin-right: 20rpx;">label: </text>
					<g-select v-model="value1" :filterable="filterable" :tran-option="listData" placeholder="点我试试">
					</g-select>
				</view>
				<view>
					<text style="margin-right: 20rpx;">value: </text>
					<g-input v-model="value1" style="width: 350rpx;"></g-input>
				</view>
			</g-title-wrap>
		</view>
		<g-divider></g-divider>
		<view style="padding:36rpx 16rpx;">
			<g-title-wrap label="自定义显示value样式(electionClass)" label-width="550">
				<template slot='header'>
				</template>
				<view style="margin:10rpx 0;">
					<text style="margin-right: 20rpx;">label: </text>
					<g-select v-model="value1" :tran-option="listData" placeholder="点我试试" electionClass='selevt-valueClass'>
					</g-select>
				</view>
				<view>
					<text style="margin-right: 20rpx;">value: </text>
					<g-input v-model="value1" style="width: 350rpx;"></g-input>
				</view>
			</g-title-wrap>
			<h6 style="color: #ff0307;">electionClass的样式需放在"theme.scss中"</h6>
		</view>
		<g-divider></g-divider>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showMask:false,
				filterable:true,
				title: '',
				value1:'value1',
				listData: [{
					value: 'value1',
					label: '显示1'
				}, {
					value: 'value2',
					label: '显示2'
				}],
			}
		},
		methods: {

		}
	}
</script>

<style>
	
</style>
